/**
 * 模态框辅助函数
 * 解决Blazor中Bootstrap模态框的交互问题
 */

// 存储模态框实例的对象
window.modalInstances = {};

/**
 * 初始化模态框
 * @param {string} modalId - 模态框的ID
 */
window.initializeModal = function(modalId) {
    try {
        const modalElement = document.getElementById(modalId);
        if (modalElement) {
            // 创建模态框实例
            const modalInstance = new bootstrap.Modal(modalElement, {
                backdrop: 'static', // 点击背景不关闭模态框
                keyboard: false     // 禁用ESC键关闭
            });
            
            // 存储实例
            window.modalInstances[modalId] = modalInstance;
            
            // 添加事件监听器
            modalElement.addEventListener('hidden.bs.modal', function () {
                // 模态框关闭后的清理工作
                document.body.classList.remove('modal-open');
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }
            });
            
            // 防止模态框内部点击事件冒泡导致关闭
            const modalContent = modalElement.querySelector('.modal-content');
            if (modalContent) {
                modalContent.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            console.log('Modal initialized:', modalId);
        } else {
            console.error('Modal element not found:', modalId);
        }
    } catch (error) {
        console.error('Error initializing modal:', modalId, error);
    }
};

/**
 * 显示模态框
 * @param {string} modalId - 模态框的ID
 */
window.showModal = function(modalId) {
    try {
        let modalInstance = window.modalInstances[modalId];
        
        // 如果实例不存在，尝试重新创建
        if (!modalInstance) {
            window.initializeModal(modalId);
            modalInstance = window.modalInstances[modalId];
        }
        
        if (modalInstance) {
            modalInstance.show();
            console.log('Modal shown:', modalId);
        } else {
            console.error('Modal instance not found:', modalId);
            // 降级处理：直接操作DOM
            const modalElement = document.getElementById(modalId);
            if (modalElement) {
                modalElement.style.display = 'block';
                modalElement.classList.add('show');
                document.body.classList.add('modal-open');
                
                // 添加背景遮罩
                const backdrop = document.createElement('div');
                backdrop.className = 'modal-backdrop fade show';
                document.body.appendChild(backdrop);
            }
        }
    } catch (error) {
        console.error('Error showing modal:', modalId, error);
    }
};

/**
 * 隐藏模态框
 * @param {string} modalId - 模态框的ID
 */
window.hideModal = function(modalId) {
    try {
        const modalInstance = window.modalInstances[modalId];
        
        if (modalInstance) {
            modalInstance.hide();
            console.log('Modal hidden:', modalId);
        } else {
            console.error('Modal instance not found:', modalId);
            // 降级处理：直接操作DOM
            const modalElement = document.getElementById(modalId);
            if (modalElement) {
                modalElement.style.display = 'none';
                modalElement.classList.remove('show');
                document.body.classList.remove('modal-open');
                
                // 移除背景遮罩
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }
            }
        }
    } catch (error) {
        console.error('Error hiding modal:', modalId, error);
    }
};

/**
 * 切换模态框显示状态
 * @param {string} modalId - 模态框的ID
 */
window.toggleModal = function(modalId) {
    try {
        const modalInstance = window.modalInstances[modalId];
        
        if (modalInstance) {
            modalInstance.toggle();
            console.log('Modal toggled:', modalId);
        } else {
            console.error('Modal instance not found:', modalId);
        }
    } catch (error) {
        console.error('Error toggling modal:', modalId, error);
    }
};

/**
 * 检查模态框是否已显示
 * @param {string} modalId - 模态框的ID
 * @returns {boolean} 是否已显示
 */
window.isModalShown = function(modalId) {
    try {
        const modalElement = document.getElementById(modalId);
        return modalElement && modalElement.classList.contains('show');
    } catch (error) {
        console.error('Error checking modal state:', modalId, error);
        return false;
    }
};

/**
 * 页面加载完成后初始化
 */
document.addEventListener('DOMContentLoaded', function() {
    console.log('Modal helper loaded');
    
    // 监听所有模态框的显示事件
    document.addEventListener('show.bs.modal', function(e) {
        console.log('Modal showing:', e.target.id);
    });
    
    // 监听所有模态框的隐藏事件
    document.addEventListener('hide.bs.modal', function(e) {
        console.log('Modal hiding:', e.target.id);
    });
}); 